<template>
    <div class="container" style="padding: 0;margin: 0;">
        <div class="grid-container">
            <div class="row row-1">
                <div class="w_full flex-col">
                    <span class="title">资料库</span>
                    <div class="flex-row comm_border" style="height: 80px;margin-top: 16px;">
                        <div class="w_full flex-row-center">
                            <span class="label_title" style="margin-left: 24px">时间</span>
                            <el-date-picker v-model="data.dtStart"
                                            type="date"
                                            placeholder="请输入日期"
                                            value-format="YYYY-MM-DD"
                                            format="YYYY-MM-DD"
                                            size="large" class="date-picker"
                                            style="margin-left: 12px"></el-date-picker>
                            <span style="margin-left: 12px">至</span>
                            <el-date-picker type="date"
                                            placeholder="请输入日期"
                                            value-format="YYYY-MM-DD"
                                            format="YYYY-MM-DD"
                                            v-model="data.dtEnd" size="large" class="date-picker"
                                            style="margin-left: 12px"></el-date-picker>

                        </div>
                        <div class="flex-row-center">
                            <el-button class="search_btn_primary" type="primary" @click="click_search" style="margin-right: 24px;width: 88px;height: 44px">
                                查询
                            </el-button>
                        </div>
                    </div>
                    <div class="flex-row-center" style="margin-top: 16px; height:80px;justify-content: space-between">
                        <el-button style="width:114px;height: 48px;border-radius: 12px" type="primary" :icon="Plus"
                                   @click="click_create">
                            新增
                        </el-button>
                        <el-input placeholder="请输入" v-model="data.searchName"
                                  style="width:412px;height: 48px;border-radius: 12px"
                                  :prefix-icon="Search"></el-input>
                    </div>
                </div>
            </div>
            <div class="row row-2 full">
                <div class="scrollable-content full">
                    <div class="flex_1" style="margin: 0">
                        <el-table :data="data.listTrain" border>
                            <el-table-column prop="index" label="序号" width="60" />
                            <el-table-column prop="dataName" label="名称" />
                            <el-table-column prop="dataDesc" label="描述" width="200" />
                            <el-table-column prop="createTimeStr" label="创建时间" width="180" />
                            <el-table-column label="操作" width="120px">
                                <template #default="scope">
                                    <!--                  <el-button link size="small" @click="click_sign(scope.$index, scope.row)">签到码-->
                                    <!--                  </el-button>-->
                                    <el-button link size="small" @click="click_detail(scope.$index, scope.row)">
                                        查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="row row-3 w_full">
                <div class="flex-row-center w_full"
                     style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
                    <el-pagination v-model:current-page="pager.currentPage"
                                   v-model:page-size="pager.pageSize"
                                   :page-sizes="[10,20,30,50]"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="pager.total"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, reactive, shallowRef } from "vue";
    import { Plus, Search } from "@element-plus/icons-vue";
    import { ElNotification } from "element-plus";
    import { tickAsTimeString } from "@/utils/TimeUtil";
    import { api_deleteExam } from "@/request/apis/examApi";
    import { ExamVO } from "@/type/vo/ExamVO";
    import { addDialog } from "@/components/gDialog/index";
    import router from "@/router";
    import msg from "@/components/msg";
    import ExamPublish from "@/views/Exam/dialogs/ExamPublish.vue";
    import { TrainingLessonsInfoVO } from "@/type/vo/TrainingLessonsInfoVO";
    import TrainSignDialog from "@/views/Train/Dialogs/TrainSignDialog.vue";
    import { api_listDataBank } from "@/request/apis/dataBankApi";
    import { DataBankInfoVO } from "@/type/vo/DataBankInfoVO";
    import AddDataBankDialog from "@/views/DataBank/Dialogs/AddDataBankDialog.vue";


    const data = reactive({
        dtStart: '',
        dtEnd: '',
        searchName: '',
        creatorName: '',
        selectStatus: -1,
        listTrain: Array<DataBankInfoVO>(),
        ansCount: 10,
    })
    const pager = reactive({
        currentPage: 1,
        pageSize: 10,
        total: 10,
    })


    onMounted(async () => {
        await search_pri();
    })

    const click_detail = (index: number, row: DataBankInfoVO) => {
        try {
            router.push({
                path: '/addDataBankView',
                query: {
                    dataId: row.dataId
                }
            })
        } catch (error) {
            // 处理取消操作
        }
    }


    const click_create = () => {
        try {
            //跳转到创建
            addDialog({
                title: "请输入名称",
                component: shallowRef(AddDataBankDialog),
                width: "800px",
                props: {},
                callBack: (dRet: boolean, dataId: string) => {
                    console.log('dRet', dRet);
                    console.log('dataId', dataId);
                    if (dRet) {
                        //跳转页面
                        router.push({
                            path: '/addDataBankView',
                            query: {
                                dataId: dataId
                            }
                        })
                        return;
                    }
                    console.log(data, "data")
                }
            })
            // 处理确认操作
        } catch (error) {
            // 处理取消操作
        }

    }

    const click_publish = (exam: ExamVO) => {
        try {
            addDialog({
                title: "发布考试",
                component: shallowRef(ExamPublish),
                width: "600px",
                props: { examId: exam.examId },
                callBack: async (dRet: boolean) => {
                    if (dRet) {
                        await click_search();
                    }
                }
            })
            // 处理确认操作
        } catch (error) {
            // 处理取消操作
        }
    }
    const click_delete = async (exam: ExamVO) => {
        try {
            const rDialog = await msg.yesNo(
                `是否确认删除考试 ${exam.title}?`,
                '警告'
            );
            if (rDialog) {
                const r = await api_deleteExam(exam.examId);
                if (!r) {
                    await msg.info('数据异常');
                    return;
                }
                if (r.code != 0) {
                    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
                    return;
                }
                await search_pri();
                ElNotification({
                    title: '提示',
                    message: '已删除!',
                })
            }
        } catch (error) {
            // 处理取消操作
        }
    }

    const search_pri = async () => {
        console.log('dtStart', data.dtStart);
        data.listTrain.length = 0;
        const limit = pager.pageSize;
        const page = pager.currentPage;
        // }
        let status = 0;
        if (data.selectStatus > 0) {
            status = data.selectStatus;
        }
        let startDate = data.dtStart;
        if (startDate == null)
            startDate = '';

        let dtEnd = data.dtEnd;
        if (dtEnd == null)
            dtEnd = '';

        let trainingName = data.searchName;
        let creatorName = data.creatorName;
        let trainingTeacher = "";
        const r = await api_listDataBank(
            trainingName,
            creatorName,
            startDate,
            dtEnd,
            trainingTeacher,
            page,
            limit);
        if (!r) {
            await msg.info('数据异常');
            return;
        }
        if (r.code != 0) {
            await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
            return;
        }
        if (r.data.records) {
            for (let i = 0; i < r.data.records.length; i++) {
                r.data.records[i].index = i + 1;
                r.data.records[i].createTimeStr = tickAsTimeString(r.data.records[i].createTime)
            }
        }

        data.listTrain = r.data.records;
        pager.total = r.data.total;
    }

    const click_search = async () => {
        await search_pri();
    };

    const handleSizeChange = async (val: number) => {
        await search_pri();
    }
    const handleCurrentChange = async (val: number) => {
        await search_pri();
    }

</script>

<style scoped>
    .grid-container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100%;
    }

    .row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .row-1,
    .row-3 {
    }

    .row-2 {
        overflow: auto;
    }

    .scrollable-content {
        line-height: 1.5em;
    }


    .title {
        font-size: 24px;
        font-weight: 600;
        color: #0A1629;
        line-height: 28px;
    }

    .label_title {
        font-size: 16px;
        font-weight: 400;
        color: #595959;
        line-height: 24px;
    }

    .date-picker {
        height: 48px;
        color: black;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid #DCDCDC;
    }

    .el-scrollbar__view {
        height: calc(100% - 100px); /* 根据实际情况调整高度 */
    }

    .infinite-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .infinite-list .infinite-list-item {
            display: flex;
            align-items: center;
            justify-content: center;
            background: black;
            margin: 10px;
            color: var(--el-color-primary);
            overflow: hidden;
        }

            .infinite-list .infinite-list-item + .list-item {
                margin-top: 10px;
            }

    .naireName {
        font-size: 20px;
        font-weight: 400;
        color: #0A1629;
        line-height: 24px;
    }

    .status {
        font-size: 16px;
        font-weight: 400;
        color: #0A1629;
        line-height: 24px;
        margin-left: 7px;
    }

    .btn1 {
        border: none;
        margin-left: 24px;
        width: auto;
        padding: 0;
    }
</style>
